<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>以缩放的动画形式隐藏和显示文字</title>
<style type="text/css">
p{
	font: 30px "微软雅黑";/*设置字体和字体大小*/
	margin:30px auto; /*设置元素外边距*/
	font-weight: 500; /*设置字体粗细*/
	color: #f35626;/*设置文字颜色*/
}
/* 设置animation属性的参数 */
.scaling-enter-active{
    animation: scaling 1s
}
.scaling-leave-active{
    animation: scaling 1s reverse
}
/* 设置元素的缩放转换 */
@keyframes scaling {
  	0% {
    	transform: scale(0);
  	}
  	50% {
    	transform: scale(1.2);
  	}
  	100% {
    	transform: scale(1);
  	}
}
</style>

<script src="../JS/vue.js"></script>
</head>
<body>
<div id="example" align="center">
	<button v-on:click="show = !show">切换显示</button>
	<transition name="scaling">
		<p v-if="show">机会总是留给有准备的人</p>
	</transition>
</div>
<script type="text/javascript">
//创建根实例
var vm = new Vue({
	el : '#example',
	data : {
		show : true
	}
});
</script>



</body>

</html>



